<template>
	人力资源管理 {{$store.state.num}}
	<br />
	<el-button @click="updateX">修改vue的数据</el-button>
	<el-button @click="getData">获取数据</el-button>
	<br />
	<!-- 数据列表 -->
	<el-table :data="news" stripe style="width: 70%">
	    <el-table-column prop="title" label="标题" width="180" />
	    <el-table-column prop="description" label="内容" width="180" />
	    <el-table-column prop="picUrl" label="图片" >
			<template #default="scope">
				<el-image :src="scope.row.picUrl" style="width: 150px;height: 100px;"></el-image>
			</template>
	    </el-table-column>
		<el-table-column label="编辑">
			<template #default="scope">
				<el-button><el-icon><Edit /></el-icon></el-button>
				<el-button @click="deleteRow(scope.$index)"><el-icon><Delete /></el-icon></el-button>
			</template>
		</el-table-column>
	  </el-table>
	
</template>

<script>
	export default{
		data(){
			return{
				news:[]
			}
		},
		methods:{
			updateX(){
				this.$store.commit('num',1000)
			},
			getData(){
				let that=this
				//axios
				this.$axios.get("http://api.tianapi.com/esports/index",{
					params:{
						key:'2179ad6ab3f5c0d49843357784d1253c'
					}
				}).then(function(res){
					console.log(res.data.newslist)
					that.news=res.data.newslist
				})
			},
			deleteRow(rIndex){
				//删除数组中的数据
				this.news.splice(rIndex,1)
			}
		}
	}
</script>

<style>
	.el-table{
		margin: 10px auto;
	}
</style>